<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    
    <div id="app">
        <kfc a1="1231" v-model="a"   />
    </div>
    
    <script>
        //  Vue的实例对象
        // 2.o  new Vue({配置})
        // 3.0 createApp({配置})
        // 任何 指令(v-) 等于的都是与js的值忽略双引号的情况
        // 任何绑定在自定义组件上的事件都是自定义事件
        const app = Vue.createApp({
            data(){
                return{
                    a:555555
                }
                   
            },
            watch:{
                a(nv,ov){
                    console.log('a变成了',nv)
                }
            },
            methods:{
                fn1(arg1,arg2){
                    console.log('我是父组件的fn1',arg1,arg2)
                }
            }
        })

         app.component('kfc',{
             template:`<h1> hi man {{ a }}  <button @click="fn1">我是kfc的按钮</button> </h1> `,
             props:['modelValue'],
             data(){
                 return {
                     a: 'aaaa'
                 }
             },
             methods:{
                 fn1(){
                     console.log('我是kfc内部的fn1')
                     this.$emit('click',1,2)
                     this.$emit('update:modelValue',9999)
                 }
             },
             created(){
                console.log('prop model value:' , this.modelValue)
             }
         })

         app.mount("#app")


    </script>







</body>
</html>